<form id="softMapForm" class="form-horizontal" action="${ctx}/admin/softRecRank/saveSoftMap.do"  method="post">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h5 class="blue">新增运营推荐软件</h5>
    </div>
    <input type="hidden" name="rankId" id="rankId" class="col-xs-12 col-sm-4 required" value="${softRecRankId!}"/>
    <input type="hidden" name="id" id="id" class="col-xs-12 col-sm-4 required" value="${softMap.id!}"/>
    <div class="modal-body">

        <!--开始时间-->
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="startDate">开始时间:</label>
            <div class="col-xs-12 col-sm-9">
                <div class=" input-group col-sm-9">
                     <span style="position: relative; z-index: 9999;">
                        <input type="text" name="startDate" id="startDate" class=" col-xs-12 col-sm-12 date-picker required" value="${softMap.startTimeShow!}" readonly  data-date-format="yyyy-mm-dd"/>
                    </span>
                    <span class="input-group-addon"> <i class="ace-icon fa fa-calendar"></i></span>
                </div>
            </div>
        </div>
        <!--结束时间-->
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="expiredDate">结束时间:</label>
            <div class="col-xs-12 col-sm-9">
                <div class=" input-group  col-sm-9">
                    <span style="position: relative; z-index: 9999;">
                    <input type="text" name="expiredDate" id="expiredDate" class=" col-xs-12 col-sm-12 date-picker" value="${softMap.expiredTimeShow!}" readonly  data-date-format="yyyy-mm-dd"/>
                    </span>
                    <span class="input-group-addon"> <i class="ace-icon fa fa-calendar"></i></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="rankNumber">显示顺序:</label>
            <div class="col-xs-12 col-sm-9">
                <div class="clearfix">
                    <span class="">
                        <input type="number" name="rankNumber" id="rankNumber" class=" col-sm-9 required"   max="99999999999"  value="${softMap.rankNumber!}" />
                    </span>
                </div>
            </div>
        </div>

        <!--选择软件-->
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="choseSoft">选择软件:</label>
            <div class="col-xs-12 col-sm-9">
                <div class="clearfix">
                    <!--<select class="js-data-example-ajax" name="choseSoft" id="choseSoft">-->
                    <!--<option value="3620194" selected="selected">select2/select2</option>-->
                    <!--</select>-->

                    <input type="text" name="choseSoft" class="col-sm-9 required" style="padding-right:0px" id="choseSoft" value="${softMap.softId!}" />
                    <input type="hidden" name="softId"  class="col-xs-12 col-sm-9 required" id="softId" value="${softMap.softId!}" />
                </div>
            </div>
        </div>
    </div>

    <div class="modal-footer center">
        <button type="button" onclick="saveRecRank()" class="btn btn-sm btn-success"><i class="ace-icon fa fa-check"></i> 保存</button>
        <button type="button" class="btn btn-sm" data-dismiss="modal"><i class="ace-icon fa fa-times"></i> 取消</button>
    </div>
</form>
<script src="${ctx}/static/admin/assets/js/jquery.validate.js"></script>
<script src="${ctx}/static/admin/assets/js/jquery.validate.messages_zh.js"></script>
<script type="text/javascript">

    function saveRecRank(){
        if($("#startDate").val() == null || $("#startDate").val()==""){
            alert("开始时间不能为空");
            return false;
        }
        if($("#rankNumber").val() == null || $("#rankNumber").val() ==""){
            alert("显示顺序不能为空");
            return false;
        }
        if($("#softId").val() == null || $("#softId").val()==""){
            alert("推荐应用不能为空");
            return false;
        }

        $("#softMapForm").submit();

    }

    $(document).ready(function(){
        $(".date-picker").datepicker({
            language : 'zh-CN',
            autoclose: true,
            todayHighlight: true
        });


        $("#choseSoft").select2({
            placeholder: "选择软件",
            minimumInputLength: 1,
            ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
                url: "${ctx}/admin/soft/listSoftsSync.do",
                dataType: 'json',
                quietMillis: 250,
                data: function (term, page) {
                    return {
                        softName: term, // search term
                    };
                },
                results: function (data, page) { // parse the results into the format expected by Select2.
                    // since we are using custom formatting functions we do not need to alter the remote JSON data
                    return { results: data.data.listData };
                },
                cache: true
            },
            initSelection: function(element, callback) {
                // the input tag has a value attribute preloaded that points to a preselected repository's id
                // this function resolves that id attribute to an object that select2 can render
                // using its formatResult renderer - that way the repository name is shown preselected
                var id = $(element).val();
                if (id !== "") {
                    $.ajax("${ctx}/admin/soft/listSoftsSync.do?id="+id, {
                        dataType: "json"
                    }).done(function(data) {
                        callback(data.data.listData[0]);
                    });
                }
            },
            formatResult: repoFormatResult, // omitted for brevity, see the source of this page
            formatSelection: repoFormatSelection,  // omitted for brevity, see the source of this page
            dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
            escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results
        });


        $("#softMapForm").validate({
            errorElement: 'div',
            errorClass: 'help-block',
            focusInvalid: true,
            highlight: function (e) {
                $(e).closest('.form-group').removeClass('has-info').addClass('has-error');
            },
            success: function (e) {
                $(e).closest('.form-group').removeClass('has-error');//.addClass('has-info');
                $(e).remove();
            },
            errorPlacement: function (error, element) {
                if(element.is('input[type=checkbox]') || element.is('input[type=radio]')) {
                    var controls = element.closest('div[class*="col-"]');
                    if(controls.find(':checkbox,:radio').length > 1) controls.append(error);
                    else error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0));
                }
                else if(element.is('.select2')) {
                    error.insertAfter(element.siblings('[class*="select2-container"]:eq(0)'));
                }
                else if(element.is('.chosen-select')) {
                    error.insertAfter(element.siblings('[class*="chosen-container"]:eq(0)'));
                }
                else error.insertAfter(element.parent());
            },

            submitHandler: function (form) {
                $.ajax({
                    cache: true,
                    type: "POST",
                    url:"${ctx}/admin/softRecRank/saveSoftRecRank.do",
                    data:$('#softMapForm').serialize(),// 你的formid
                    async: false,
                    error: function(request) {
                        alert("Connection error");
                    },
                    success: function(data) {
                        if(data.result == "success"){
                            if(data.data != null && data.data != ""){
                                alert(data.data)
                            }
                            window.location="${refer!}";
                        }else{
                            alert(data.data);
                        }
                    }
                });
            },
            invalidHandler: function (form) {
            }
        })
    });

    function repoFormatResult(data){
        var markup = '<div id="'+data.id+'">' +data.softName+'</div>';
        return markup;

    }

    function repoFormatSelection(data){
        $("#softId").val(data.id);
        return data.softName;
    }
</script>